<template>
    <div class="home">
        <h2>一辆{{car.brand}}车,价值{{car.price}}万</h2>
        <button @click="changePrice">修改汽车的价格</button>
        <button @click="changeCar">修改汽车</button>
        <h2>当前求和为：{{sum}}</h2>
       <button @click="changeSum">点我sum+1</button>
    </div>
</template>


<script setup lang="ts" name = "Page14">
import {ref, reactive,readonly } from 'vue';
   let car =  reactive({brand:'奔驰',price:100}) // readonly
   console.log(car)
   function changePrice() {
    car.price +=10
   }
   function changeCar(){
    // car.value  =  {brand:"大众",price:10}
    Object.assign(car,{brand:"大众",price:10})
   }

   let sum=ref(0);
  function changeSum(){
   sum.value+=1
   // sum = ref(9)
  }
</script>

<style lang="scss" scoped>

</style>